<template>
    <div>
        <div>
            <div class="item">
                <div @click="active=1" :class="active==1?`choose`:``">网页</div>
                <div @click="active=2" :class="active==2?`choose`:``">咨询</div>
                <div @click="active=3" :class="active==3?`choose`:``">图片</div>
            </div>
            <div class="content">
                <div v-show="active==1">网页内容</div>
                <div v-show="active==2">咨询内容</div>
                <div v-show="active==3">图片内容</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                active:1
            }
        },
        methods:{
            
        }
    }
</script>

<style lang="less">
    .item{
        height: 50px;
        width: 600px;
        border: 1px solid #0f0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
    }
    .content{
        div{
            height: 300px;
            width: 600px;
            background-color: skyblue;
        }
    }
    .choose{
        color: #f00;
    }
</style>